<template>
	<div class="box">{{ a }}</div>
	<button class="mybtn" @click="add">操作</button>
	<a href="../../images/1.jpg" download="1.jpg">下载</a>
</template>
<script>
import { encode, decode } from 'js-base64';
export default {
	data() {
		return {
			a: 1,
			b: 2
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
			this.a++;
		},
		convert(e) {
			return String(e).replace(/[-_]/g, function (e) {
				return "-" == e ? "+" : "/"
			}).replace(/[^A-Za-z0-9\+\/]/g, "")
		}
	},
	mounted() {
		this.a++;
		const testWord = 'AXO7373I252LLBYR2DJC2ZE7GB42DQG2D352DZG2TK3AUFIC25266C6NEE7R2LLSOPBNKNEI5ZN3NEE7R2DSSLAPDG2TXE7R2DJC2KLA';
		let str = decode(testWord);
		//console.log(str);

		let canvas = document.createElement('canvas');
		canvas.width = 400;
		canvas.height = 400;
		let ctx = canvas.getContext('2d');
		ctx.save();
		ctx.scale(1 / 3, 1 / 3);
		ctx.fillRect(30, 30, 10, 10);
		ctx.restore();
		ctx.fillRect(50, 50, 300, 300);
		let imgData = ctx.getImageData(0, 0, 400, 400);
		let outputImageCanvas = document.createElement('canvas');
		outputImageCanvas.width = imgData.width;
		outputImageCanvas.height = imgData.height;
		outputImageCanvas.getContext('2d').putImageData(imgData, 0, 0)
		let url = outputImageCanvas.toDataURL();
		console.log(url);
	}
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000000;
	will-change: transform;
}
</style>